<script setup lang="ts">
import Taro from '@tarojs/taro';
import { useAuthStore } from '@/store';
const AuthStore = useAuthStore();
const avatarUrl = ref(
  'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
);
function onChooseAvatar(e: any) {
  avatarUrl.value = e.detail.avatarUrl;
}
function commitUser(e) {
  if (e.detail.value.nickname) {
    Taro.setStorageSync('token', '123');
    AuthStore.setUserInfo({
      userName: e.detail.value.nickname,
      avatarUrl: avatarUrl.value
    });
    AuthStore.login();
    Taro.navigateBack();
  } else {
    Taro.showToast({
      title: '必须填写昵称',
      icon: 'error'
    });
  }
}
</script>

<template>
  <basic-layout show-tab-bar>
    <custom-nav-bar title="登录" />
    <nut-row type="flex" justify="space-between" class="pt-2">
      <nut-col :span="4" @tap="Taro.navigateBack()">
        <IconFont
          name="rect-left"
          style="height: var(--nut-button-default-height, 76rpx); width: var(--nut-button-default-height, 76rpx)"
        ></IconFont>
      </nut-col>
      <nut-col :span="4"></nut-col>
      <nut-col :span="12">
        <text
          style="height: var(--nut-button-default-height, 76rpx); line-height: var(--nut-button-default-height, 76rpx)"
        >
          设置头像和昵称
        </text>
      </nut-col>
      <nut-col :span="4"></nut-col>
    </nut-row>
    <form @submit="commitUser">
      <div class="p-5 flex-center">
        <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <nut-avatar size="large">
            <img :src="avatarUrl" />
          </nut-avatar>
        </button>
      </div>
      <nut-input type="nickname" placeholder="请输入昵称" name="nickname" />
      <view class="fjm">
        <nut-button type="primary" form-type="submit">
          <template #icon>
            <IconFont name="checklist" class="nut-icon-am-jump nut-icon-am-infinite"></IconFont>
          </template>
          确定
        </nut-button>
      </view>
    </form>
  </basic-layout>
</template>
